<template>
  <common-drawer
    :width="800"
    :visible="props.visible"
    title="用户信息"
    @close="updateVisible(false)"
    :isShowTab="true"
    :activeKey="activeKey"
    :tabList="tabList"
    @tabChange="tabChange"
  >
    <div class="content">
      <div style="margin-bottom: 10px" v-if="activeKey == '1'">
        <a-button type="primary" class="border-radius" @click="editClick">编辑</a-button>
      </div>
      <!-- 基本信息 -->
      <div class="content-item" v-show="activeKey == '1'">
        <a-form ref="formRef" :model="form" :label-col="{ span: 3 }">
          <a-row>
            <a-col :span="6">
              姓名： {{ form.realName }}
            </a-col>
            <a-col :span="6">
              账号：{{ form.account }}
            </a-col>
            <a-col :span="6">
              性别：{{ form.sexWrapper }}
            </a-col>
            <a-col :span="6">
              是否是超级管理员：{{ form.superAdminFlagWrapper }}
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              用户状态： {{ form.statusFlagWrapper }}
            </a-col>
            <a-col :span="6">
              用户排序：{{ form.userSort }}
            </a-col>
            <a-col :span="6">
              手机号：{{ form.phone }}
            </a-col>
            <a-col :span="6">
              邮箱：{{ form.email }}
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="6">
              邮箱：{{ form.email }}
            </a-col>
            <a-col :span="6">
              出生日期: {{ form.birthday ? form.birthday.split(" ")[0] : form.birthday }}
            </a-col>
            <a-col :span="6">
              人员工号：{{ form.employeeNumber }}
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="margin-bottom: 10px" v-if="activeKey == '2'">
        <a-button type="primary" class="border-radius" @click="editOtherClick(true)">编辑</a-button>
      </div>
      <!-- 组织机构 -->
      <div class="content-item" v-show="activeKey == '2'">
        <a-form ref="formRef" :model="form" :label-col="{ span: 3 }">
          <a-row>
            <a-col :span="12">
              ic卡号：{{ form.icNumber }}
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
    <a-modal
      :visible=otherVisible
      title="特殊配置"
      width="60%"
      :confirm-loading="loading"
      @cancel="editOtherClick(false)"
      @ok="saveOtherClick"
    >
      <a-form :model="otherform">
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item label="ic卡号:" name="IC_NUMBER">
              <a-input v-model:value="otherform.IC_NUMBER" allow-clear placeholder="请输入ic卡号"/>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-button type="primary" class="border-radius" @click="addOrg">
              <plus-outlined/>
              添加机构
            </a-button>
            <vxe-table
              border
              show-overflow
              :data="otherform.orgidlist"
              :column-config="{ resizable: true }"
              :edit-config="{ trigger: 'click', mode: 'cell' }"
              max-height="600"
              ref="otherRef"
            >
              <vxe-column type="seq" width="60" title="序号" align="center"></vxe-column>
              <vxe-column field="orgid" title="机构ID" :edit-render="{}" align="center">
                <template #edit="{ row }">
                  <vxe-select v-model="row.orgid" @change="changorgid(row.orgid,row)" transfer placeholder="请选择机构">
                    <vxe-option
                      v-for="(item, index) in orgidlist"
                      :key="item.ORG_ID"
                      :value="item.ORG_ID"
                      :label="item.ORG_ID+'-'+item.ORG_NAME"
                    >
                    </vxe-option>
                  </vxe-select>
                </template>
              </vxe-column>
              <vxe-column title="操作" width="100" align="center" fixed="right">
                <template #default="{ row }">
                  <icon-font
                    type="class"
                    iconClass="icon-button-delete"
                    color="red"
                    font-size="20px"
                    fontWeight="bold"
                    @click="removeOrgid(row)"
                  ></icon-font>
                </template>
              </vxe-column>
            </vxe-table>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>

    <!-- 新增编辑弹框 -->
    <UserAddEdit v-model:visible="showEdit" v-if="showEdit" :data="props.data" @done="getUserDetail"/>
  </common-drawer>
</template>

<script setup name="userOtherDetail">
import {ref, onMounted, watch, nextTick} from 'vue';
import {UsersApi} from '../api/UsersApi.js';
import UserDetail from './user-detail.vue';
import UserAddEdit from './user-add-edit.vue';
import {Common} from "@/api/Common";
import {message} from "ant-design-vue";
import {VXETable} from "vxe-table";
// import SetApprover from './set-approver.vue';

const props = defineProps({
  visible: Boolean,
  data: Object,
  //是否默认选中审批人
  //isShowApprover: Boolean
});

const emits = defineEmits(['update:visible', 'done']);
// 激活tab
const activeKey = ref('1');
// tab栏列表
const tabList = ref([
  {
    key: '1',
    name: '基础信息',
  },
  {
    key: '2',
    name: '特殊信息',
    icon: 'icon-tab-baseinfo'
  }
]);

// 点击添加机构
const addOrg = () => {
  let obj = {
    orgid: '',
  };
  otherform.value.orgidlist.push(obj)
};
// 表单数据
const form = ref({});
const otherform = ref({orgidlist: []});
// 是否显示编辑弹框
const showEdit = ref(false);
// 弹框加载
const loading = ref(false);
// ref
const otherVisible = ref(false);
const otherRef = ref(null);
const orgidlist = ref([]);
// 删除证书信息
const removeOrgid = async row => {
  // 删除当前行
  const type = await VXETable.modal.confirm('您确定要删除该数据?');
  if (type === 'confirm') {
    const $table = otherRef.value;
    $table.remove(row);
  }
  const res = otherRef.value.getTableData().tableData;
  otherform.value.orgidlist = res;
};
// 基本信息展示项配置
const baseColumn = ref([
  {
    name: '上机机构',
    value: 'parentOrgName'
  },
  {
    name: '机构编码',
    value: 'orgCode'
  },
  // {
  //   name: '机构类型',
  //   value: 'orgType'
  // },
  {
    name: '排序',
    value: 'orgSort'
  },
  {
    name: '机构简称',
    value: 'orgShortName'
  },
  {
    name: '机构状态',
    value: 'statusFlag'
  }//,
  // {
  //   name: '税号',
  //   value: 'taxNo'
  // },
  // {
  //   name: '备注',
  //   value: 'remark'
  // }
]);

onMounted(() => {
  // if (props.isShowApprover) {
  //   activeKey.value = '2';
  // }
  getOrgidlist();
  getUserDetail();
});

watch(
  () => props.data,
  val => {
    if (val) {
      getUserDetail();
    }
  },
  {deep: true}
);
const getOrgidlist = () => {
  Common.getOrgids().then(res => {
    if (res.success) {
      orgidlist.value = res.data;
    }
  })
}

const changorgid = (value, row) => {
  const list = otherform.value.orgidlist.filter((item) => item.orgid == value)
  if (list.length > 1) {
    row.orgid = undefined
    message.warning('不能选择相同的机构');
    return
  }
}
// 获取用户详情
const getUserDetail = () => {
  UsersApi.detail({userId: props.data.userId}).then(res => {
    form.value = Object.assign({}, res);
    if (res.userOrgDTOList && res.userOrgDTOList.length > 0) {
      // 设置机构
      form.value.userOrgList = res.userOrgDTOList.map(item => {
        return {
          mainFlag: item.mainFlag,
          positionId: item.positionId,
          positionName: item.positionName,
          orgId: item.deptId ? item.deptId : item.companyId,
          orgName: item.deptName ? item.deptName : item.companyName
        };
      });
    } else {
      form.value.userOrgList = [];
    }

    if (res.userCertificateList.length > 0) {
      form.value.userCertificateList.forEach(item => {
        if (item.attachmentId) {
          item.attachmentName = item.attachmentIdWrapper.name;
          item.attachmentUrl = item.attachmentIdWrapper.thumbUrl;
        }
      });
    }
  });
};

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};
// tab切换
const tabChange = key => {
  activeKey.value = key;
};
// 点击编辑
const editClick = () => {
  showEdit.value = true;
};
const editOtherClick = (value) => {
  if (!value) {
    otherform.value = {orgidlist: []}
  } else {
    if (form.value.icNumber) {
      otherform.value.IC_NUMBER = form.value.icNumber
    }

    if (form.value.orgidlist) {
      form.value.orgidlist.forEach(item => {
        let obj = {
          orgid: item,
        }
        otherform.value.orgidlist.push(obj)
      })
    }
  }

  loading.value = false;
  otherVisible.value = value;
};
const saveOtherClick = async () => {
  otherform.value.userId = props.data.userId
  otherform.value.orgidList = otherform.value.orgidlist.map(item => item.orgid)
  loading.value = true;
  UsersApi.updateOther(otherform.value).then(async result => {
    // 提示添加成功
    message.success(result.message);
    // 移除加载框
    loading.value = false;
    editOtherClick(false);
    getUserDetail()
  }).catch(() => {
    loading.value = false;
  });
  ;
};

</script>

<style scoped lang="less">
:deep(.ant-drawer-header) {
  background: rgba(250, 134, 53, 1);
}

:deep(.ant-drawer-title) {
  color: #fff;
}

.top {
  height: 40px;
  line-height: 40px;
  margin-bottom: 14px;

  .orgName {
    margin-right: 5px;
    font-size: 22px;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
  }

  .short-name {
    font-size: 18px;
    color: rgba(166, 166, 166, 1);
  }
}

.content {
  width: 100%;
  height: calc(100% - 122px);
  overflow-y: auto;
  overflow-x: hidden;

  .content-item {
    width: 100%;
    height: calc(100% - 42px);
  }
}
</style>
